<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form>
      <switch-normal v-model="commonAttr.isLoadAssets" label="素材加载" @change="onChangeAttr"></switch-normal>
      <dropdown-normal v-if="commonAttr.isLoadAssets" label="素材加载完弹出页面" v-model="commonAttr.pageId" :valLists="pushPages()" @change="onChangeAttr"></dropdown-normal>
      <input-normal v-if="commonAttr.isLoadAssets" label="延迟时间秒" v-model="commonAttr.delayTime" @change="onChangeAttr"></input-normal>
      <dropdown-normal v-model="commonAttr.itemType" :valLists="PROCESS_ITEM_TYPES" label="进度条组件类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
      <input-normal label="内距" placeholder="上 右 下 左" v-model="commonAttr.padding" @change="onChangeAttr"></input-normal>
      <switch-button v-model="isBorder" title="背景进度" btnStr_0="边框" btnStr_1="背景" class="switch-button" @change="onChangeAttr">
        <template v-slot:default>
          <el-divider content-position="center">背景样式</el-divider>
          <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
          <el-divider content-position="center">进度样式</el-divider>
          <color-normal v-model="commonAttr.barColor" label="进度颜色" format="rgb" @change="onChangeAttr"></color-normal>
        </template>
        <template v-slot:custom>
          <el-divider content-position="center">背景样式</el-divider>
          <add-img-con :url="commonAttr.url" comAttr="commonAttr" picAttr="url" :height="100" :isCrop="false" class="margin-left-right-16"></add-img-con>
          <el-divider content-position="center">进度样式</el-divider>
          <add-img-con :url="commonAttr.barUrl" comAttr="commonAttr" picAttr="barUrl" :height="100" :isCrop="false" class="margin-left-right-16"></add-img-con>
          <textarea-normal label="进度点url及样式" placeholder="url,width,height,top,left" v-model="commonAttr.barPointUrl"  @change="onChangeAttr"></textarea-normal>
        </template>
      </switch-button>
      <switch-normal v-model="commonAttr.isDisplayPercent" label="显示进度信息" @change="onChangeAttr"></switch-normal>
      <template v-if="commonAttr.isDisplayPercent">
        <el-divider content-position="center">进度属性</el-divider>
        <input-normal label="进度描述" v-model="commonAttr.percentStr"  @change="onChangeAttr"></input-normal>
        <input-normal label="进度样式" v-model="commonAttr.percentStyle" placeholder="top,width,height,backgroundColor,borderRadius,left" @change="onChangeAttr"></input-normal>
        <slider-normal v-model="commonAttr.fontSize" label="字号" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
        <color-normal v-model="commonAttr.color" label="字体颜色" format="rgb" @change="onChangeAttr"></color-normal>
        <input-normal label="进度信息内距" placeholder="上 右 下 左" v-model="commonAttr.padding" @change="onChangeAttr"></input-normal>
      </template>
      <switch-normal v-model="commonAttr.isSeparator" label="千位分隔符" @change="onChangeAttr"></switch-normal>
    </el-form>
  </right-template>
</template>


<script setup lang="ts">
import SwitchButton from '@/views/components/switch-button.vue'
import { useWebComponentStore } from '@/store/web/component'
import { PROCESS_ITEM_TYPES } from '@/const/'
import { pushPages } from '@/views/ts/'

const useWebComponent = useWebComponentStore()

const isBorder = ref(false)
let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
</script>
